import React, { useEffect } from 'react'
import { connect } from 'react-redux'
import { actionCreators } from "./store/index";
import { Content } from "./style";
import Scroll from "@/components/common/Scroll";
import Slider from "@/components/Slider";
import { getRecommendList } from './store/actionCreators';
import RecommendList from '@/components/common/list';
import { forceCheck } from 'react-lazyload';
import { EnterLoading } from '@/pages/Singers/style'
import Loading from '@/components/common/loading-v2/index'

function Recommend(props) {
    const { bannerList, songsCount, recommendList, enterLoading } = props;
    const { getBannerDataDispatch, getRecommendListDispatch } = props;
    console.log(bannerList, '-------');
    // let songsCount = 2;
    useEffect(() => {
        getBannerDataDispatch();
        getRecommendListDispatch();
    }, [])
    return (
        <Content play={songsCount}>
            <Scroll className="list" onScroll={forceCheck}>
                {/* forceCheck 延迟加载，拖到哪，加载到哪 */}
                <div>
                    <Slider bannerList={bannerList}></Slider>
                    <RecommendList recommendList={recommendList} />
                </div>
            </Scroll>
            {enterLoading ? <EnterLoading><Loading></Loading></EnterLoading> : null}
        </Content>
    )
}
// state 状态树
const mapStateToProps = (state) => {
    return {
        bannerList: state.recommend.bannerList,
        songsCount: state.player.playList.length,
        recommendList: state.recommend.recommendList,
        enterLoading: state.recommend.enterLoading,
    }
}
const mapDispatchToProps = (dispatch) => {
    return {
        getBannerDataDispatch() {
            dispatch(actionCreators.getBannerList())
        },
        getRecommendListDispatch() {
            dispatch(actionCreators.getRecommendList())
        }
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(Recommend)
